<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="医院名称">
                            <el-select v-model="form.hospitalId" placeholder="请选择" filterable>
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="item in hospitalList"
                                    :key="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号">
                            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="alignRight">
                        <el-button type="primary" @click="searchList()" class="queryBtn">查询</el-button>
                        <el-button class="leadingOut" type="primary" @click="addAdmin()">添加</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed type="index" width="50px" label="序号"></el-table-column>
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
                <el-table-column prop="status" label="账号状态">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-text="开启"
                            inactive-text="关闭"
                            :active-value="0"
                            :inactive-value="1"
                            @change="changeSwitch(scope.row.userId,scope.row.status)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="resetPassword(scope.row.userId,scope.row.hospitalName)"
                            size="small"
                        >重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹窗 -->
        <el-dialog title="新增管理员" :visible.sync="addFormVisible" width="468px">
            <el-form :model="addForm" ref="addForm" label-width="100px" :rules="rules">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="addForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医院" prop="hospitalId">
                    <el-select v-model="addForm.hospitalId" placeholder="请选择" filterable>
                        <el-option
                            :label="item.name"
                            v-for="(item,index) in dialogHospitalList"
                            :key="index"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="sumbitAddRow('addForm')" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 重置密码弹窗 -->
        <el-dialog title="重置密码" :visible.sync="resetVisible" width="468px">
            <el-form :model="resetForm" ref="resetForm" label-width="100px">
                <el-form-item label="医院名称">
                    <span>{{hospitalNameDialog}}</span>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="resetForm.newPassword"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetcancel()">取 消</el-button>
                <el-button type="primary" @click="resetSure()" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import adminManage from "@/api/adminManage";
export default {
    name: "adminManageIndex",
    data() {
        return {
            //loading层
            tableLoading: false,
            //form提交
            form: {
                pageNum: 1,
                pageSize: 10,
                username: null,
                hospitalId: ""
            },
            //添加弹窗列表数据
            addForm: {
                username: "",
                password: "",
                hospitalId: null,
                hospitalName: ""
            },
            //主页列表数据
            tableData: [],
            //医院名称下拉列表数据
            hospitalList: [],
            //添加框下拉列表
            dialogHospitalList: [],
            //重置密码框数据
            resetForm: {
                newPassword: "",
                userId: null
            },
            //分页
            page_sizes: [10, 30, 50, 100],
            page_totals: 60,
            //添加弹窗隐藏
            addFormVisible: false,
            //添加弹窗数据验证规则
            rules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                hospitalId: [
                    { required: true, message: "请选择医院", trigger: "change" }
                ]
            },
            //loading层
            addLoading: false,
            //重置弹窗隐藏
            resetVisible: false,
            hospitalNameDialog:null,
        };
    },
    inject: ["reload"],
    mounted() {
        this.getList(this.form);
        this.hospitalSelect();
    },
    methods: {
        // 按钮权限
        hasPermission(e) {
            // console.log(e)
            return window.helper.hasPermission(e);
        },
        //获取列表
        getList(e) {
            adminManage
                .getList(e)
                .then(res => {
                    if (!res.data.code) {
                        this.tableData = res.data.data.dtoList;
                        this.page_totals = res.data.data.count;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        //医院名称下拉列表
        hospitalSelect(e) {
            adminManage
                .hospitalSelect(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        let newArr = [];
                        resData.forEach(e => {
                            newArr.push({
                                name: e.name,
                                value: String(e.hospitalId)
                            });
                        });
                        newArr.unshift({
                            name: "全部",
                            value: ""
                        });
                        this.hospitalList = newArr;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //查询
        searchList() {
            this.form.pageNum = 1
            this.getList(this.form);
        },
        //账号状态切换
        changeSwitch(userId, status) {
            let newStatus = Number(status);
            let datas = { userId, status: newStatus };
            // console.log(datas)
            adminManage
                .togStatus(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("状态修改成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //添加按钮弹窗
        addAdmin() {
            this.addFormVisible = true;
            this.$nextTick(() => {
                this.$refs['addForm'].resetFields()
            })
            let newArr = [...this.hospitalList];
            newArr.splice(0, 1);
            this.dialogHospitalList = newArr;
        },
        // 弹窗取消
        cancel() {
            this.addFormVisible = false;
            this.$message("已取消");
        },
        //新增管理员添加框确定事件
        sumbitAddRow(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.addFormVisible = false;
                    let datas = { ...this.addForm };
                    this.hospitalList.forEach(e => {
                        if (datas.hospitalId == e.value) {
                            datas.hospitalName = e.name;
                        }
                    });
                    adminManage
                        .add(datas)
                        .then(res => {
                            if (!res.data.code) {
                                this.reload();
                                this.succStatus("添加成功");
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: "warning"
                                });
                            }
                        })
                        .catch(err => {
                            this.errorStatus(err);
                        });
                } else {
                    this.warningStatus("必填项未填写");
                    return false;
                }
            });
        },
        // 重置密码
        resetPassword(e,hospitalNameDialog) {
            this.hospitalNameDialog = hospitalNameDialog
            this.resetVisible = true;
            this.resetForm.userId = e;
        },
        //重置密码取消
        resetcancel() {
            this.resetVisible = false;
            this.resetForm.newPassword = "";
        },
        // 重置确定
        resetSure() {
            this.resetVisible = false;
            let datas = { ...this.resetForm };
            adminManage
                .resetUserPassword(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("重置成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        // 警告状态弹窗
        warningStatus(txt) {
            this.eleMsg(txt, "warning");
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        }
    }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
    height: 40px;
    margin-top: 20px;
}
.pagesCon > div {
    float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
</style>